<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/tlds/fmt.tld" prefix="fmt"%>
<%@ taglib uri="/WEB-INF/tlds/tiles-jsp.tld" prefix="tiles"%>
<script type="text/javascript">
$(function() {
	
	tableToGrid("#tablaCandidatos", {
        caption:'Candidatos Activos',
        height: 'auto',
        shrinkToFit: false,
        colModel :[
            {name: 'nombre', index: 'nombre' ,align: 'left',width:110},
            {name: 'apellido', index: 'apellido',align: 'left', width:140},
            {name: 'perfil', index: 'perfil',align: 'left', width:100},
            {name: 'accion', align: 'left', sortable:false}]
    });
	
	
	
	tableToGrid("#tablaSolicitudesAbiertas", {
		height: 150, 
		rowNum: 5, 
		rowList: [10,20,30],
        caption:'Lista de Solicitudes Abiertas',
        shrinkToFit: false,
        colModel :[
            {name: 'oficina', index: 'oficina' ,align: 'left',width:110},
            {name: 'fechaEsperadaIncorporacion', index: 'fechaEsperadaIncorporacion',align: 'left', width:100},
            {name: 'perfil', index: 'perfil',align: 'left', width:140},
            {name: 'proyectoAsignado', index: 'perfil',align: 'left', width:120},
            {name: 'accion', align: 'left', width:90, sortable:false}],
        pager: "#tablaSolicitudesAbiertas", 
        viewrecords: true
    });
	
	tableToGrid("#tablaSolicitudesResumen", {
        caption:'Resumen de Solicitudes',
        height: 'auto',
        shrinkToFit: false,
        colModel :[
            {name: 'oficina', index: 'oficina' ,align: 'left',width:110},
            {name: 'fechaEsperadaIncorporacion', index: 'fechaEsperadaIncorporacion',align: 'left', width:100},
            {name: 'perfil', index: 'perfil',align: 'left', width:140},
            {name: 'proyectoAsignado', index: 'perfil',align: 'left', width:100},
            {name: 'accion', align: 'left', width:90, sortable:false}]
    });
	
	 $("[name='detallesSolicitud']").button({
        icons: {
            primary: "ui-icon-zoomin"
        },
        text: false
    }).click(function() {
    	consultarSolicitud(this.value);
    });
    
    $("[name='gestionarSolicitud']").button({
        icons: {
            primary: "ui-icon-pencil"
        },
        text: false
    });
	
});
</script>
</head>
<body>
<br /><br />

<div style="width: 500px; float: left;position:relative;margin-left: 20px;">
    <table id="tablaSolicitudesAbiertas">
        <tr>
            <th id="oficina">Oficina</th>
            <th id="fechaEsperadaIncorporacion">Incorporacion</th>
            <th id="perfil">Perfil Buscado</th>
            <th id="proyectoAsignado">Proyecto Asignado</th>
            <th id="accion">Accion</th>
        </tr>
         <c:forEach var="solicitud" items="${solicitudesAbiertas}">
        	<tr>
	           <td>${solicitud.oficinaDescripcion}</td>
	           <td>${solicitud.fechaEsperadaIncorporacion}</td>
	           <td>${solicitud.perfilNombre}</td>
	           <td>${solicitud.proyectoAsignado}</td>
	           <td><div class="filaAcciones"><button class="botonAccion" title="Ver Detalles" 
	           name="detallesSolicitud" value="${solicitud.idSolicitud}"></button><button class="botonAccion" 
	           title="Gestionar Solicitud" name="gestionarSolicitud" value="${solicitud.idSolicitud}"></button></div></td>
		    </tr>
         </c:forEach>
	</table>
</div>
<div style="width: 350px; float:right;position:relative;margin-right: 60px;">
    <table id="tablaCandidatos">
        <tr>
            <th id="nombre">Nombre</th>
            <th id="apellido">Apellido</th>
            <th id="perfil">Perfil</th>
            <th id="accion">Accion</th>
        </tr>
        <tr>
           <td>solicitud.fechaSolicitud</td>
           <td>solicitud.oficinaDescripcion</td>
           <td>solicitud.</td>
           <td>solicitud.perfilNombre</td>
	    </tr>        
	</table>
</div>
<br style="clear: both;" />
<div style="width: 450px; float: left;position:relative;margin-top: 20px;margin-left: 20px;">
    <table id="tablaSolicitudesResumen">
        <tr>
            <th id="oficina">Oficina</th>
            <th id="fechaEsperadaIncorporacion">Fecha Incorporacion</th>
            <th id="perfil">Perfil Buscado</th>
            <th id="proyectoAsignado">Proyecto Asignado</th>
            <th id="accion">Accion</th>
        </tr>
        <tr>
           <td>solicitud.fechaSolicitud</td>
           <td>solicitud.oficinaDescripcion</td>
           <td>solicitud</td>
           <td>solicitud.perfilNombre</td>
           <td>solicitud.perfilNombre</td>
	    </tr>
	</table>
</div>

